<template>
	<view class="flex-col page">

		<view class="flex-col section_2">
			<view class="flex-col items-center section_3">
				<text class="text_1">最专业的团队</text>
				<text class="text_2">根据您的需求匹配</text>
			</view>
		</view>
		<view class="flex-col group">
			<view class="flex-col section_4">
				<view class="justify-between section_5">
					<text class="text_3">我的房屋信息</text>
					<image :src="imgUrl+'16557826925530282387.png'" @click="go('/pages/index/editHourse?id='+projectId)"
						class="image_1" />
				</view>
				<view class="justify-between group_1 view">
					<text class="text_4">房屋位置</text>
					<text class="text_6">{{cityInfo}}</text>
				</view>
				<view class="justify-between group_2">
					<text class="text_8">详细地址</text>
					<text class="text_9">{{address}}</text>
				</view>
				<view class="justify-between group_1 view_1">
					<text class="text_4 text_10">房屋面积</text>
					<text class="text_6 text_11">{{roomArea}}m²</text>
				</view>
				<view class="justify-between group_3">
					<text class="text_12">房屋类型</text>
					<text class="text_13">{{roomTypeName}}</text>
				</view>
			</view>
			<view class="flex-col section_6">
				<view class="flex-col">
					<view class="flex-row group_5">
						<image :src="imgUrl+'16557826792503103103.png'" class="image_2" />
						<text class="text_14">服务内容</text>
					</view>
					<view class="flex-row group_6">
						<text class="text_15">高级设计</text>
						<image :src="imgUrl+'16557826926394646541.png'" class="image_3 image_4"
							@click="go('/pages/service/service')" />
					</view>
					<text class="text_16">(含每个软装细节）</text>
				</view>
				<view class="flex-col group_7">
					<view class="flex-row">
						<text class="text_17">预算合约审核</text>
						<image :src="imgUrl+'16557826926394646541.png'" class="image_3 image_5"
							@click="go('/pages/service/service')" />
					</view>
					<text class="text_18">(含每个软装细节）</text>
				</view>
				<view class="flex-row group_9">
					<text class="text_19">主材100条询价</text>
					<image :src="imgUrl+'16557826926394646541.png'" class="image_3 image_6"
						@click="go('/pages/service/service')" />
				</view>
				<view class="flex-row group_10">
					<text class="text_20">8小时线下咨询</text>
					<image :src="imgUrl+'16557826926394646541.png'" class="image_3 image_7"
						@click="go('/pages/service/service')" />
				</view>
				<view class="flex-col group_11">
					<view class="flex-row">
						<text class="text_21">施工巡检高级服务</text>
						<image :src="imgUrl+'16557826926394646541.png'" class="image_3 image_8"
							@click="go('/pages/service/service')" />
					</view>
					<view class="flex-row group_13">
						<text class="text_22">(21次巡检含进度监控）</text>
						<text class="text_23">根据地域判断是否需要超限补偏远费！</text>
					</view>
				</view>
				<view class="flex-col group_14">
					<view class="flex-row group_15">
						<text class="text_24">结算审核服务</text>
						<image :src="imgUrl+'16557826926394646541.png'" class="image_3 image_9"
							@click="go('/pages/service/service')" />
					</view>
				</view>
				<view class="flex-col u-m-t-40" @click="couponShow=true">
					<view class="flex-row u-row-between " style=" display: flex; align-items: center; height: 100%;">
						<text class="text_24">选择优惠券</text>
						<view class="flex-row u-col-center">
							<text class="text_188">{{couponAmount>0?'-¥'+couponAmount:'请选择'}}</text>
							<image :src="$IMG_URL + '16557838861113221762.png'" class="image_100" />
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col list">
				<view class="flex-col list-item">
					<view class="flex-row">
						<image :src="imgUrl+'16557826792503103103.png'" class="image_11" />
						<text class="text_27">服务流程</text>
					</view>
					<view class="flex-col items-center group_19">
						<u-parse :content="content.serviceProcess"></u-parse>
					</view>
				</view>
			</view>
			<view class="flex-col  " style="padding-bottom: 100px;">
				<view class="flex-col list-item">
					<view class="flex-row">
						<image :src="imgUrl+'16557826792503103103.png'" class="image_11" />
						<text class="text_27">服务保障</text>
					</view>
					<view class="flex-col items-center group_19">
						<u-parse :content="content.serviceGuarantee"></u-parse>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-row section_9 fixed">
			<view class="flex-row group_21">
				<view class="group_22">
					<text class="text_32">￥</text>
					<text class="text_33">{{priceA.payablePrice>0?priceA.payablePrice:'无数据'}}</text>
				</view>
				<text class="text_34">￥{{priceA.totalPrice>0?priceA.totalPrice:'暂无数据'}}</text>
			</view>
			<view class="flex-col items-center group_23 " @click="tokefu">
				<image :src="imgUrl+'16557826925516947131.png'" class="image_17" />
				<text class="text_35">在线咨询</text>
			</view>
			<view class="flex-col text-wrapper" @click="commitPrice"><text class="text_36">确认</text></view>
		</view>
		<shop-coupon v-if="couponShow" :amount="priceA.payablePrice" :list="coupon" @confirm="couponConfirm"
			@close="couponShow=false"></shop-coupon>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				coupon_id: null,
				coupon: [],
				couponShow: false,
				couponAmount: 0,
				list_W42MmqBK: [null, null],
				roomArea: "",
				district: '',
				address: '',
				projectId: '',
				cityInfo: '',
				areaId: "",
				roomTypeName: '',
				imgUrl: this.$IMG_URL,
				priceA: '',
				coupon: [],
				couponid: '',
				couponAmount: 0,
				content: {}
			};
		},
		onShow() {
			this.$store.dispatch('checkHouse');
		},
		created() {
			this.getroom();
			this.getCoupons();
			this.getcontent();
		},
		methods: {
			// 跳转至客服
			tokefu(){
				uni.navigateTo({
					url:"/pages/my/message/kefu"
				})
			},
			couponConfirm(coupon) {
				let {
					coupon_id,
					amount,
					couponsId
				} = coupon;
				this.coupon_id = couponsId;
				this.couponAmount = amount;
				this.couponShow = false;
				this.getpriceL();
			},
			getcontent() {
				this.$http('consult.queryServiceDetails', {
					type: 1
				}).then(r => {
					if (r.code == 200) {
						this.content = r.data;
					}
				});
			},
			getroom() {
				this.$http('harryroom.queryHousing').then(r => {
					if (r.code == 200) {

						this.roomTypeName = r.data.project.roomTypeName
						this.roomArea = r.data.project.roomArea
						this.district = r.data.project.district
						this.address = r.data.project.provinceName + r.data.project.cityName + r.data.project
							.districtName + r.data.project.position
						this.projectId = r.data.project.projectId
						this.cityInfo = r.data.project.provinceName + r.data.project.cityName + r.data.project
							.districtName
						this.areaId = r.data.project.district;
						this.getpriceL()


					}
				});
			},
			getpriceL() {
				this.$http('oteherL.getpriceL', {
					areaId: this.areaId,
					projectId: this.projectId,
					couponsId: this.coupon_id,
					serviceTypeId: 35,
				}).then(res => {
					if (res.code == 200) {
						// console.log(res.data);
						this.priceA = res.data
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			commitPrice() {
				this.$http('oteherL.commitQLCZX', {
					projectId: this.projectId,
					couponsId: this.coupon_id,
					totalMoney: this.priceA.totalPrice,
					payableMoney: (this.priceA.payablePrice - this.couponAmount).toFixed(2),
					ordersType: '1',
					couponsMoney: this.couponAmount,
				}).then(res => {
					if (res.code == 200) {
						this.go('/pages/pay/pay?orderid=' + res.data + '&orderType=0');
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			getCoupons() {
				this.$http('coupon.coupon').then(r => {
					if (r.code == 200) {
						if (r.data) {
							// console.log(r.data,'getCoupons')
							this.coupon = r.data;
						}

					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.image_100 {
		margin: 4rpx 0 4rpx 22rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 26rpx;
	}

	.text_188 {
		color: #fe641a;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.group_1 {
		padding-left: 24rpx;
		padding-right: 22rpx;
	}

	.list-item {
		padding: 29rpx 24rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.image_3 {
		width: 28rpx;
		height: 28rpx;
	}

	.group_19 {
		margin-top: 40rpx;
	}

	.image_11 {
		margin-top: 12rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.text_27 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_4 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_6 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 53rpx 31.5rpx 32rpx;
		background-color: #ffffff;
		position: relative;
	}

	.section_2 {
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827030371522001.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group {
		margin-top: -47rpx;
		padding: 0 24rpx;
		position: relative;
	}

	.section_9 {
		height: 104rpx;
		padding: 16rpx 23rpx;
		background-color: #ffffff;
	}

	.image {
		position: absolute;
		left: 31.5rpx;
		bottom: 26.5rpx;
		width: 21rpx;
		height: 36rpx;
	}

	.text {
		color: #000000;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.section_3 {
		padding: 71rpx 0 163rpx;
		background-color: #1d6aff99;
	}

	.section_4 {
		padding-bottom: 41rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_6 {
		margin-top: 20rpx;
		padding: 29rpx 24rpx 35rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.list {
		padding: 20rpx 0 24rpx;
	}

	.group_21 {
		flex-shrink: 0;
		align-self: center;
	}

	.group_23 {
		position: fixed;
		margin-left: 370rpx;
		margin-bottom: 5rpx;
		text-align: center;
		flex: 1 1 auto;
	}

	.text-wrapper {
		position: fixed;
		margin-left: 485rpx;
		flex-shrink: 0;
		background-color: #1d6aff;
		border-radius: 36rpx;
		width: 220rpx;
		height: 72rpx;
	}

	.text_1 {
		color: #ffffff;
		font-size: 48rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 56rpx;
	}

	.text_2 {
		margin-top: 27rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.section_5 {
		padding: 29rpx 24rpx 31rpx;
		background-color: #ebf2ff;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.view {
		margin-top: 30rpx;
	}

	.group_2 {
		margin: 39rpx 23rpx 0 24rpx;
	}

	.view_1 {
		margin-top: 46rpx;
	}

	.group_3 {
		margin-top: 33rpx;
		padding-left: 24rpx;
		padding-right: 23rpx;
	}

	.group_7 {
		margin-top: 38rpx;
	}

	.group_9 {
		margin-top: 46rpx;
	}

	.group_10 {
		margin-top: 44rpx;
	}

	.group_11 {
		margin-top: 44rpx;
	}

	.group_14 {
		margin-top: 45rpx;
	}

	.list-item:last-of-type {
		margin-top: 20rpx;
	}

	.group_22 {
		width: 210rpx;
		height: 38rpx;
		text-align: center;
	}

	.text_34 {
		margin-top: 5rpx;
		align-self: center;
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		// text-decoration: line-through;
	}

	.image_17 {
		width: 40rpx;
		height: 40rpx;
	}

	.text_35 {
		margin-top: 6rpx;
		color: #666666;
		font-size: 20rpx;
		width: 100rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_36 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_3 {
		margin-bottom: 4rpx;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_1 {
		margin-top: 10rpx;
		width: 30rpx;
		height: 32rpx;
	}

	.text_8 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_9 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		text-align: right;
		width: 369rpx;
	}

	.text_10 {
		margin-bottom: 6rpx;
	}

	.text_11 {
		margin-top: 6rpx;
	}

	.text_12 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_13 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_5 {
		padding-bottom: 34rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_6 {
		margin-top: 22rpx;
	}

	.text_16 {
		margin-top: 15rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_18 {
		margin-top: 15rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_19 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_6 {
		margin-left: 12rpx;
		margin-top: 3rpx;
	}

	.text_20 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_7 {
		margin-left: 15rpx;
		margin-top: 3rpx;
	}

	.group_13 {
		margin-top: 15rpx;
	}

	.group_15 {
		padding-bottom: 30rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_16 {
		padding-top: 30rpx;
	}

	.text_32 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_33 {
		height: 100%;
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_2 {
		margin-top: 18rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.text_14 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_15 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_4 {
		margin-left: 19rpx;
		margin-top: 4rpx;
	}

	.text_17 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;

		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_5 {
		margin-left: 19rpx;
		margin-top: 4rpx;
	}

	.text_21 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_8 {
		margin-left: 19rpx;
		margin-top: 3rpx;
	}

	.text_22 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_23 {
		margin-left: 23rpx;
		color: #ff371d;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_24 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_9 {
		margin-left: 15rpx;
		margin-top: 4rpx;
	}

	.text_25 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_17 {
		margin-top: 6rpx;
	}

	.text_29 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_13 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.text_30 {
		margin-top: 30rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_14 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.text_26 {
		color: #fe641a;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_10 {
		margin: 3rpx 0 4rpx 22rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 26rpx;
	}
</style>
